<template>
  <div class="laundry">
    <table border="1" style="width: 100%">
      <thead>
        <th colspan="6" style="height: 50px">采购清单</th>
      </thead>
      <tbody>
        <tr style="height: 40px">
          <td>姓名:{{ data?.customerName }}</td>
          <td>地址：{{ data?.receivingAddress }}</td>
          <td>电话：{{ data?.receivingMobile }}</td>
          <td>采购编码：{{ data?.purchaseOrderNo }}</td>
          <td>订单编号：{{ data?.orderCode }}</td>
          <td>采购备注</td>
        </tr>
        <tr>
          <td style="text-align: center">客户信息</td>
          <td>
            {{ data?.receivingName == null ? "" : data?.receivingName + "," }}
            {{ data?.receivingMobile == null ? "" : data?.receivingMobile + "," }}
            {{ data?.receivingAreaDetail == null ? "" : data?.receivingAreaDetail + "," }}
            {{ data?.receivingAddress == null ? "" : data?.receivingAddress }}
          </td>
          <td>供应商信息</td>
          <td colspan="2">
            <div>企业名称：{{ data?.factoryName }}</div>
            <div>跟单人员：{{ data?.trackerName }}</div>
            <div>工厂地址：{{ data?.location }}</div>
            <div>跟单人电话:{{ data?.trackerTel }}</div>
          </td>
          <td>
            <div class="remarks" v-html="data?.remark"></div>
          </td>
        </tr>
        <tr style="height: 40px">
          <td style="text-align: center">序号</td>
          <td>商品信息</td>
          <td>商品单位</td>
          <td>商品备注</td>
          <td>数量</td>
          <td>件数</td>
        </tr>
        <tr style="height: 80px" v-for="(item, index) in data?.productDetailList" :key="index">
          <td style="text-align: center">{{ index + 1 }}</td>
          <td>
            <div>商品名称:{{ item?.productAliasName }}</div>
            <div>规格组合:{{ item.skuSpecification }}</div>
            <div>SKU编码:{{ item?.skuCode }}</div>
            <div>ID:{{ item?.productId }}</div>
          </td>
          <td style="text-align: center">{{ useCodeArrStore().getDictName("shop_unit", item?.productUnit) }}</td>
          <td>
            <div class="remarks" v-html="item?.remark"></div>
          </td>
          <td style="text-align: center">{{ item?.commodityNum }}</td>
          <td style="text-align: center">{{ item?.goodsPartNum }}</td>
        </tr>
      </tbody>
    </table>
    <div class="btn_print">
      <!-- <el-button type="" @click="handelClickBack">返回</el-button> -->
      <el-button type="primary" @click="handelClickPrint">打印</el-button>
    </div>
  </div>
</template>
<script setup>
import { onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
// 导入api
import { getPurchaseOrderId } from "@/apis/procure/index";
import useCodeArrStore from "@/store/modules/select";
// 变量
const useRout = useRoute();
const router = useRouter();
const data = ref();
const getDetail = () => {
  getPurchaseOrderId(useRout.query.purchaseOrderId).then(res => {
    if (res.code === 200) {
      data.value = res.data;
      res.data.productDetailList === null
        ? []
        : res.data.productDetailList.map(it => {
            const realt = JSON.parse(it.properties);
            let uniqueVals = [];
            // 遍历原始数组
            realt.forEach(item => {
              // 检查 specificationVal 是否已经存在于 uniqueVals 数组中
              if (!uniqueVals.includes(item.specificationVal)) {
                // 如果不存在，则添加到 uniqueVals 数组中
                uniqueVals.push(item.specificationVal);
              }
            });
            it.attrGg = uniqueVals.join(",");
          });
    }
  });
};
const handelClickBack = () => {
  router.push("/procure/purchase-order");
};
// 打印事件
const handelClickPrint = () => {
  // window.print(); // 打印当前窗口
  const printWindow = window.open("", "", "height=800,width=800");
  printWindow.document.write(`
      <!DOCTYPE html>
      <html>
        <head>
          <title>Print Content</title>
          <style>
          table {
              border-collapse: collapse;
            }
            table td,
            table th {
              border: 1px solid black; /* 单元格边框 */
            }
              img{
              width: 50px;height: 50px;}
              video{
              width: 50px;height:50px}
          </style>
        </head>
        <body>
      <table border="1" style="width: 100%">
      <thead>
        <th colspan="6" style="height: 50px">采购清单</th>
      </thead>
      <tbody>
         <tr style="height: 40px">
            <td>姓名:${data.value?.customerName}</td>
            <td>地址：${data.value?.receivingAddress}</td>
            <td>电话：${data.value?.receivingMobile}</td>
            <td>采购编码：${data.value?.purchaseOrderNo}</td>
            <td>订单编号：${data.value?.orderCode}</td>
            <td>采购备注</td>
          </tr>
        <tr>
            <td style="text-align: center">客户信息</td>
            <td>
              ${data.value?.receivingName == null ? "" : data.value?.receivingName},
              ${data.value?.receivingMobile == null ? "" : data.value?.receivingMobile},
              ${data.value?.receivingAreaDetail == null ? "" : data.value?.receivingAreaDetail},
              ${data.value?.receivingAddress == null ? "" : data.value?.receivingAddress}
              </td>
            <td>供应商信息</td>
            <td colspan="2">
              <div>企业名称：${data.value?.factoryName}</div>
              <div>跟单人员：${data.value?.trackerName}</div>
              <div>工厂地址：${data.value?.location}</div>
              <div>跟单人电话:${data.value?.trackerTel}</div>
            </td>
            <td>${data.value?.remark}</td>
          </tr>
        <tr style="height: 40px">
          <td style="text-align: center">序号</td>
          <td>商品信息</td>
          <td>商品单位</td>
          <td>商品备注</td>
          <td>数量</td>
          <td>件数</td>
        </tr>
        ${data.value?.productDetailList.map((item, index) => {
          return `
              <tr style="height: 80px">
            <td style="text-align: center">${index + 1}</td>
            <td>
              <div>商品名称:${item?.productAliasName}</div>
              <div>规格组合:${item.skuSpecification}</div>
              <div>SKU编码:${item?.skuCode}</div>
              <div>ID:${item?.productId}</div>
            </td>
            <td style="text-align: center">${useCodeArrStore().getDictName("shop_unit", item?.productUnit) == undefined ? "" : useCodeArrStore().getDictName("shop_unit", item?.productUnit)}</td>
            <td style="text-align: center">${item?.remark}</td>
            <td style="text-align: center">${item?.commodityNum}</td>
            <td style="text-align: center">${item?.goodsPartNum}</td>
          </tr>`;
        })}
      </tbody>
    </table>
        </body>
      </html>
    `);
  printWindow.document.close();
  printWindow.print();
};
const setStyles = () => {
  setTimeout(() => {
    let imgs = document.querySelectorAll(".remarks img");
    let video = document.querySelectorAll(".remarks video");
    // 遍历这些img元素
    imgs.forEach(function (img) {
      // 设置每个img元素的宽度为100px
      img.style.width = "100px";
    });
    // 遍历这些img元素
    video.forEach(function (video) {
      // 设置每个img元素的宽度为100px
      video.style.width = "100px";
    });
  }, 1000);
};
onMounted(() => {
  getDetail();
  setStyles();
});
</script>
<style scoped lang="scss">
@media print {
  .arco-layout-header {
    display: none !important;
  }
}
table {
  border-collapse: collapse;
}
table td,
table th {
  border: 1px solid black; /* 单元格边框 */
}
.btn_print {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}
.laundry {
  padding: 20px;
}
</style>
